

    class setBanner {
        // 定义的属性数据
        constructor(element, imgArr) {
            this.ele = element;
            this.arr = imgArr;
    
            // 在 参数的标签对象中 获取对应的标签
            this.ul = element.querySelector('.clear');
            this.ol = element.querySelector('.clearol');
    
            // 定义变量 存储 ul>li
            this.ullis;
    
            // 定义变量 存储 ol>li
            this.ollis;
    
            // 定义变量储存显示的 li的索引下标
            // 因为没有克隆没有定位移动 初始值是 0
            this.index = 0;
    
            // 定义变量 设定初始值
            this.bool = true;
    
            // 定义变量储存定时器
            this.time;
        }
    
        // 定义入口函数 init
        init() {
            this.setLi();
            this.setClick();
            this.autoLoop();
            this.enterLeave();
            this.setHid();
        }
    
        // 定义函数方法
    
        // 1, 根据数组,动态渲染生成li标签
        setLi() {
    
            // 步骤思路:
            // 1, 定义空字符
            // 2, 根据数组动态生成 li标签
            //    第一个 li 标签,透明度为 1 其他li标签透明度为0
            // 3, 将li标签写入到ul,ol标签
            //    第一个 li 标签,添加class,active
    
            // 空字符串
            let ulLiStr = '';
            let olLiStr = '';
    
            // 根据数组动态生成
            this.arr.forEach((item, key) => {
                ulLiStr += key === 0 ? `<li style="opacity:1" ><img src="${item.url}"></li>` : `<li><img src="${item.url}"></li>`;
    
                olLiStr += key === 0 ? `<li class="active" name="focus" num="${key}"></li>` : `<li name="focus" num="${key}"></li>`;
            });
    
            // 生成 字符串 写入 ul ol标签
            this.ul.innerHTML = ulLiStr;
            this.ol.innerHTML = olLiStr;
    
            // 获取 ul>li标签
            this.ullis = this.ul.querySelectorAll('li');
    
    
            // 获取 ol>li标签
            this.ollis = this.ol.querySelectorAll('li');
        }
    
    
    
        // 设定一个 焦点切换 函数
        // 切换时 一定是 当前的 li 透明度变成 0
        //       一定是 要显示的li 透明度变成 1
        // 设定一个参数 传参改变的 性质
        // 到底是要 + 还是要 - 还是要按照数值切换
        // 点击左按钮 index--  点击右按钮index++   点击焦点按钮 给index赋值索引下标
        setOpacity(change) {
            // 1, 让当前的ul>li 透明度为 0
            // 此时 显示的li 索引下标存储在 index 中
            move(this.ullis[this.index], { opacity: 0 });
    
            // 2, 根据change参数输入的不同数据,执行不同程序
            if (change === 'left') {
                this.index--;
            } else if (change === 'right') {
                this.index++;
            } else {
                this.index = change;
            }
    
            // 3, 设定 index 数值的切换
            // 如果 index 是 -1 那么要显示是的 最后一个li
            // 如果 index 是 最后一个li索引下标+1 那么要显示是的 第一个li
            if (this.index === -1) this.index = this.arr.length - 1;
            if (this.index === this.arr.length) this.index = 0;
    
            // 4, 根据新的index 让对应的 ul>li 显示
            move(this.ullis[this.index], { opacity: 1 }, () => {
                this.bool = true;
            });
    
            // 5, 设定 焦点样式
            this.setFocus()
        }
    
        setFocus() {
            // 给所有的ol>li清除 class,active
            // 给 索引是 index 的 ol>li 添加 class,active
            this.ollis.forEach((item, key) => {
                item.classList.remove('active');
    
                if (key === this.index) {
                    item.classList.add('active');
                }
            })
        }
    
        // 点击事件
        // 点击左按钮   传参 left  index--
        // 点击右按钮   传参 right index++
        // 点击焦点按钮 传参 index的索引下标
    
        setClick() {
            // 给 父级div添加点击事件 
            // 通过事件委托 判断点击的是谁 执行不同的程序
            // 防止点击过快
            this.ele.addEventListener('click', e => {
                if (e.target.getAttribute('name') === 'left') {
                    console.log(123)
                    // 触发程序前,先执行防止点击过快
                    if (!this.bool) return
                    this.bool = false;
    
                    // 调用 this.setOpacity() 函数 输入参数left
                    this.setOpacity('left');
    
                } else if (e.target.getAttribute('name') === 'right') {
                    // 触发程序前,先执行防止点击过快
                    if (!this.bool) return
                    this.bool = false;
    
                    // 调用 this.setOpacity() 函数 输入参数right
                    this.setOpacity('right');
    
    
                } else if (e.target.getAttribute('name') === 'focus') {
                    // 触发程序前,先执行防止点击过快
                    if (!this.bool) return
                    this.bool = false;
    
                    // 获取点击标签 num属性的属性值 转化为数值
                    // 就是 对应的索引下标,赋值给index
                    let num = e.target.getAttribute('num') - 0;
                    // 赋值参数 是 num的数值
                    this.setOpacity(num);
    
                }
            })
    
        }
    
    
        // 自动轮播
        // 设定定时器 调用 this.setOpacity() 函数
        // 传参 left 或者 right 也就是 this.index-- 或者 this.index++
        autoLoop() {
            this.time = setInterval(() => {
                this.setOpacity('right');
            }, 3000)
        }
    
        // 移入移出
        // 鼠标移入,清除定时器
        // 鼠标移出,开启定时器
        enterLeave() {
            this.ele.addEventListener('mouseenter', () => {
                clearInterval(this.time);
            });
    
            this.ele.addEventListener('mouseleave', () => {
                this.autoLoop();
            });
        }
    
    
        // 浏览器最小化
        setHid() {
            // 步骤思路:
            // 浏览器最小化  清除定时器
            // 浏览器显示    再次执行调用 自动轮播函数
            document.addEventListener('visibilitychange', () => {
                if (document.visibilityState === 'hidden') {
                    clearInterval(this.time);
                } else if (document.visibilityState === 'visible') {
                    this.autoLoop();
                }
            })
        }
    
    }